<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <button @click="onChangeTitle()">变标题</button>
    </view>
  </view>
  <navigator url="/subpkg_test/pages/goods-list/goods-list">
    跳转到商品列表页面
  </navigator>
  <uni-badge text="1"></uni-badge>
  <uni-badge text="2" type="success" @click="bindClick"></uni-badge>
  <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
  <button @click="getData()">获取频道数据</button>
</template>

<script setup>
  // 目前 @dcloudio/uni-app 不支持自动导入，需要自己写
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const title = ref('Hello Vue3 组合式 setup 写法')

  const onChangeTitle = () => {
    title.value = '标题被修改了吧'
  }

  onLoad(() => {
    console.log('组合式API，页面 onLoad')
  })

  // 获取数据
  const getData = async () => {
    // uni. 调用 uni-app 的 API，相比微信小程序，主要做了两个升级
    //   1. 支持多平台，H5端、小程序端都支持
    //   2. 支持 promise 写法，处理异步更方便了
    const res = await uni.request({
      method: 'GET',
      url: 'http://geek.itheima.net/v1_0/channels',
    })
    console.log(res.data.data.channels)
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
